<template>
	<div class="container">
		<div class="news-content">
			<div class="news-body">
				<div class="title">
					<div class="date">
						<ul class="tc">
							<span class="font12 month">{{new Date().getMonth()+1}}月</span>
							<span class="font18 day">{{new Date().getDate()}}</span>
						</ul>
						<ol>
							<li class="week">今天</li>
							<li>{{toDay|getToDayWeek}}</li>
						</ol>
					</div>
					<div class="article-tabs tabs">
						<ul>
							<li><a href="javascript:;" class="tab-li active">快讯 <span></span></a></li>
						</ul>
					</div>
				</div>
				<div class="tab-box">
					<template v-for="(item,$index) in news_list">
						<router-link :to="{path:'newsinfo',query:{id:item.id}}">
							<div class="row">
								<div class="col">
									<div class="control clear data-bottom-id">
										<div class="grade2"></div>
										<div class="intro">
											<h2 class="news-info-title">{{item.title}}</h2>
											<div class="news-info-content">{{item.content}}</div>
											<div class="time-box">
												<i class="fa fa-clock-o"></i>
												{{item.create_time}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</router-link>
					</template>
					
					
				</div>
			
				<!-- 分页 -->
				<div class="page-show">
					<div id="page-fen"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data:function(){
			return{
				news_list:[],
				count: 0,
				page: 1,
				page_size: 10,
				toDay: new Date().getDay()
			}
		},
		mounted:function(){
			this.getNewsList(this.page, this.page_size);
		},
		methods: {
			getNewsList(page, page_size) {
				let that = this;
				$.get('//api.imrating.com/api/news/' + '?page=' + page + '&page_size=' + page_size, function(res) {
					that.news_list = res.data.news;
					that.count = res.data.count;
					that.pageFen();
					that.$emit('letData', true)
				});
			},
			getPageData(page,page_size){
				let that = this;
				$.get('//api.imrating.com/api/news/' + '?page=' + page + '&page_size=' + page_size, function(res) {
					let data = res.data.news;
					for (let item of data) {
						that.news_list.push(item);
					}
				});
			},
			pageFen(){
				let that = this;
				layui.use(['laypage', 'layer'], function(){
					var laypage = layui.laypage
						,layer = layui.layer;
					 laypage.render({
						elem: 'page-fen'
						,count: that.count
						,theme: '#FFB800'
						,limits:[10,30,50]
						,jump:function(obj,first){
							if(!first){
								that.getPageData(obj.curr,that.page_size)
							}
						}
					  });
				})
			}
		},
		filters: {
		      getToDayWeek(val) {
		        let week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
		        return week[val];
		
		      }
		    }
	}
</script>
<style scoped="scoped">
	.page-show{
		margin: 30px;
		width: 100%;
		overflow: hidden;
	}
	.news-content{
		margin: 20px 0 40px 0;
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
		border-radius: 10px;
	}
	.time-box{
		width: 100%;
		padding: 10px 0 0 0;
		overflow: hidden;
		color: #999999;
		font-size: 14px;
		text-align: left;
	}
	.news-info-content{
		font-size: 16px;
		color: #707070;
		line-height: 25px;
		text-indent: 2em;
		text-align: left;
	}
	a:hover{
		text-decoration: none;
	}
	.news-info-title{
		text-align: left;
		font-size: 20px;
		color: #333;
		margin-bottom: 20px;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.news-body .control .intro {
		margin-left: 60px;
	}
	.news-body .control .grade2 {
		width: 14px;
		height: 14px;
		background-image: url(../../assets/images/zixun-dot.png);
		background-size: 14px 14px;
		border-radius: 100%;
		position: absolute;
		left: -7px;
		top: 8px;
	}
	.news-body .control {
		margin-left: 5px;
		padding: 0 0 50px 30px;
		border-left: #DCDCDC 1px solid;
		position: relative;
	}
	.clear {
		clear: both;
	}
	.tab-box{
		width: 100%;
		overflow: hidden;
		
	}
	.news-body{
		width: 100%;
		padding: 30px;
		overflow: hidden;
	}
	 .title {
		height: 90px;
		display: block;
	}
	.date {
		height: 44px;
		float: left;
	}
	.date ul {
		width: 40px;
		height: 44px;
		display: block;
		border-radius: 4px;
		float: left;
		text-align: center;
	}
	.font12 {
		font-size: 12px;
	}
	.tc  .month {
		width: 40px;
		height: 20px;
		line-height: 20px;
		background-color: #c4192d;
		color: #FFF;
		display: block;
	}
	 .month {
		border-radius: 6px 6px 0 0;
	}
	.day{
		width: 40px;
		font-weight: bold;
		background: #FFF;
		color: #333;
		height: 24px;
		line-height: 24px;
		padding-bottom: 2px;
		display: block;
		box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
	}
	.date ul .day {
		width: 40px;
		border-radius: 0 0 6px 6px;
		border-left: #DCDCDC 1px solid;
		border-right: #DCDCDC 1px solid;
		border-bottom: #DCDCDC 1px solid;
	}
	.date ol {
		display: block;
		height: 44px;
		margin-left: 58px;
	}
	.date ol .week {
		color: #333;
		font-weight: bold;
		margin-bottom: 5px;
	}
	.title .tabs {
		padding: 4px 0 0 0px;
		margin-left: 30px;
		height: 44px;
		float: left;
		border-left: #DCDCDC 1px solid;
	}
	.article-tabs ul {
		float: left;
		list-style-type: none;
		margin-left: 30px;
	}
	.article-tabs ul .active {
		color: #333;
		font-weight: bold;
		font-size: 22px;
	}
	.article-tabs ul a {
		position: relative;
		display: inline-block;
		color: #707070;
		font-size: 20px;
	}
	.article-tabs ul a:hover{
		text-decoration: none;
	}
	.article-tabs ul .active span {
		width: 100%;
		height: 3px;
		background: #ffbb00;
		position: absolute;
		left: 0;
		bottom: -8px;
		opacity: 1;
	}
	@media (max-width: 760px){
		.news-body .control{
			padding: 0 0 10px 5px;
		}
		.news-body .control .intro{
			margin-left: 30px;
		}
	}
</style>